<template>
  <div class="dept-notice-summary">
    <div class="search-form">
      <el-cascader
        clearable
        filterable
        @change="deptChange"
        :options="deptTree"
        v-model="filterDeptId"
        :props="{
          label: 'name',
          value: 'id',
          checkStrictly: true
        }">
          <template slot-scope="{node, data}">
            <span>{{ data.name }}</span>
          </template>
      </el-cascader>

      <el-button type="primary" @click="loadDeptNoticeList()">搜索</el-button>
      <el-button type="primary" icon="el-icon-download" @click="exportExcel()">导出</el-button>
    </div>

    <el-table style="marginTop:20px" :data="noticeList" height="500" v-loading="loading">
      <el-table-column align="center" type="index" label="序号" />
      <el-table-column align="center" prop="deptName" label="部门" width="300" />
      <el-table-column align="center" prop="noticeTitle" label="公告标题" />
      <el-table-column align="center" prop="noticeCount" label="通知人数" />
      <el-table-column align="center" prop="yiReadCount" label="已读人数" />
      <el-table-column align="center" prop="weiReadCount" label="未读人数" />
      <el-table-column align="center" prop="createTime" label="发布时间" />
    </el-table>
    
    <!-- 分页 -->
    <el-pagination
      style="marginTop:20px"
      @size-change="pageSizeChange"
      @current-change="pageIndexChange"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      :total="totalCount"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
import {exportDeptNotice} from './export-excel'
export default {
  name: 'deptNoticeSummary',
  props: {
    noticeId: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      filterDeptId: [],
      noticeList: [],
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      loading: false
    }
  },
  methods: {
    async loadDeptNoticeList () {
      this.loading = true
      let request = {
        noticeId: this.noticeId,
        page: this.pageIndex,
        limit: this.pageSize
      }
      if (this.filterDeptId.length > 0) {
        request.deptId = this.filterDeptId[this.filterDeptId.length - 1]
      }

      let res = await this.$http.post('/news-admin/sta/notice/dept', request)
      this.noticeList = res.data.list
      this.totalCount = res.data.totalCount
      this.loading = false
    },
    pageSizeChange (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.loadDeptNoticeList()
    },
    pageIndexChange (val) {
      this.pageIndex = val
      this.loadDeptNoticeList()
    },
    deptChange (val) {
      if (val.length === 0) {
        this.filterDeptId = []
        this.loadDeptNoticeList()
      }
    },
    back () {
      this.$emit('back')
    },
    async exportExcel () {
      let res = await this.$http.post('/news-admin/sta/notice/dept', {noticeId: this.noticeId, page: 1, limit: 99999})
      let list = res.data.list
      exportDeptNotice(list)
    }
  },
  created () {
    this.$store.dispatch('user/loadDeptList')
  },
  mounted () {
    this.loadDeptNoticeList()
  },
  computed: {
    deptTree () {
      return this.$store.getters['user/deptTree']
    }
  }
}
</script>
